<template>
  <div class="wrap">
    <div class="title">
      {{ userInfo.isPayPassword ? "更改余额支付密码" : "设置余额支付密码" }}
    </div>
    <div class="content">
      <div class="item" v-if="userInfo.isPayPassword">
        <em>原密码</em>
        <input
          type="password"
          placeholder="请输入原密码"
          v-model="orginalPassword"
          class="orginPassword"
        />
      </div>
      <div class="item">
        <em>{{ userInfo.isPayPassword ? "新密码" : "设置密码" }}</em>
        <input
          type="password"
          placeholder="请输入新密码"
          v-model="newPassword"
          class="orginPassword"
        />
      </div>
      <div class="item" style="border: 0px">
        <em>{{ userInfo.isPayPassword ? "确认新密码" : "确认密码" }}</em>
        <input
          type="password"
          placeholder="再次输入新密码"
          v-model="sureNewpassword"
          class="orginPassword"
        />
      </div>
    </div>
    <div v-if="!userInfo.isPayPassword" class="forgetPassword" @click="forgetPassWord">
      忘记密码
    </div>
    <div class="btnSure" @click="sureBtn">确认</div>
  </div>
</template>

<script>
import { Field } from "vant";
import {
  apiAppUserInfo,
  apiInitAppUserPayPassword,
  apiCheckPayPassword,
  apiUpdateAppUserPayPassword,
} from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      orginalPassword: "", //初始密码
      newPassword: "", //新密码
      sureNewpassword: "", //确认新密码
      userInfo: "",
    };
  },
  created() {
    this.getAppUserInfo();
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
  },
  methods: {
    //获取个人信息：
    getAppUserInfo() {
      apiAppUserInfo({}).then((res) => {
        this.userInfo = res.data;
        console.log("userInfo", this.userInfo);
      });
    },
    //确认：
    sureBtn() {
      if (this.userInfo.isPayPassword) {
        //重置密码操作
        this.getCheckPayPassword();
      } else {
        //初始设置密码操作
        this.getInitAppUserPayPassword();
      }
    },
    //忘记密码
    forgetPassWord() {
       this.$router.replace({
            path: "/pages/bForgetPassword",
            query: {
            },
        });
        return
      if (this.newPassword != this.sureNewpassword) {
        this.$toast.fail("两次输入的密码不一致请重新输入");
        return;
      }else if(this.newPassword==''){
        this.$toast.fail("请先填写要设置的新密码");
        return;
      }
       this.$router.push({
            path: "/pages/bForgetPasswordCode",
            query: {
              //传递参数
              passWord: this.newPassword,
            },
        });
    },
    //初始化支付密码：
    getInitAppUserPayPassword() {
      if (this.newPassword != this.sureNewpassword) {
        this.$toast.fail("两次输入的密码不一致请重新输入");
        return;
      }
      apiInitAppUserPayPassword({
        payPassword: this.newPassword,
      }).then((res) => {
        if (res.code == 200) {
          this.$toast.success("设置成功!");
          this.$router.push({
            path: "/pages/bIndex",
            query: {
              //传递参数
            },
          });
        }
      });
    },
    //校验支付密码是否正确:step1
    getCheckPayPassword() {
      if (this.newPassword != this.sureNewpassword) {
        this.$toast.fail("两次输入的密码不一致请重新输入");
        return;
      }
      apiCheckPayPassword({
        payPassword: this.orginalPassword,
      }).then((res) => {
        if (res.data == true) {
          this.updateAppUserPayPassword() //更新密码
        } else {
          this.$toast.fail("原支付密码有误，请重新输入");
        }
      });
    },
    // 更新密码step2:
    updateAppUserPayPassword() {
      apiUpdateAppUserPayPassword({
        oldPassword: this.orginalPassword,
        newPassword:this.newPassword
      }).then((res) => {
        if (res.code == 200) {
          this.$toast.success("设置成功!");
          this.$router.push({
            path: "/pages/bMyWallet",
            query: {
              //传递参数
            },
          });
        }
      });
    },
  },
  components: {
    [Field.name]: Field,
  },
};
</script>

<style scoped>
.title {
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  padding: 20px;
}
.content {
  width: 93%;
  background: #ffffff;
  border-radius: 20px;
  margin: 0 auto;
  padding-bottom: 20px;
}
.item {
  overflow: hidden;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ddd;
  width: 80%;
  margin: 0 auto;
}
em {
  display: inline-block;
  float: left;
  width: 90px;
}
.orginPassword {
  float: left;
  width: 58%;
  margin-left: 20px;
}
input {
  border: 0px;
}
input::placeholder {
  font-size: 12px;
  font-weight: 300;
  color: #999999;
}
.forgetPassword {
  font-size: 12px;
  text-align: right;
  color: #fc7817;
  margin-top: 20px;
  margin-right: 20px;
  font-weight: 600;
}
.btnSure {
  width: 95%;
  position: fixed;
  left: 2.5%;
  bottom: 20px;
  height: 50px;
  line-height: 50px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}
</style>
